<template>
  <div class="insert">
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          有什么新鲜事想分享给大家
        </p>
        <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
        </button>
      </header>
      <div class="card-content">
        <section>
          <b-field>
            <b-input type="textarea"
                     minlength="10"
                     maxlength="200"
                     placeholder="Maxlength automatically counts characters">
            </b-input>
          </b-field>
        </section>

      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">发表</a>
        <a href="#" class="card-footer-item">删除</a>
        <a href="#" class="card-footer-item">公开</a>
          <b-field class="file is-primary" :class="{'has-name': !!file}">
            <b-upload v-model="file" class="file-label">
            <span class="file-cta">
                <b-icon class="file-icon" icon="upload"></b-icon>
                <span class="file-label">点击上传文件</span>
            </span>
              <span class="file-name" v-if="file">
                {{ file.name }}
            </span>
            </b-upload>
          </b-field>
      </footer>
    </div>
  </div>
</template>
<script>
export default {
  name: 'InsertBox',
  data () {
    return {
      file: null
    }
  }
}
</script>
<style>
.insert{
  margin-bottom: 20px;
}
</style>
